<template>

  <!--头: 搜索框-->
  <header class="video-list-head">
    <!--搜索框: 背景色，背景提示字，展示取消按钮，双绑视频标题，回车时触发，点击取消时触发-->
    <van-search background="black" placeholder="请输入视频标题进行搜索" show-action
                v-model="videoTitle"
                @search="searchByVideoTitle(1, videoPageInfo['pageSize'], videoTitle)"
                @cancel="searchFirstPageVideos()"/>
  </header>

  <!--体: 视频列表-->
  <section class="video-list-body">

    <!--分隔符: 虚线-->
    <van-divider dashed>视频列表</van-divider>

    <!--卡片: 遍历视频数据，视频标题，视频价格，原始价格，视频描述，点击卡片时触发-->
    <van-card v-for="video in videos" :key="video['videoId']"
              :title="video['videoTitle'] + ' - ' + video['author']"
              :price="video['price']"
              :origin-price="video['price'] / 0.8"
              :desc="video['videoInfo'] === '' ? '该视频暂无描述': video['videoInfo']"
              @click="toVideoDetail(video['videoId'])">
      <template #thumb>
        <!--视频封面图: 计算MinIO代理地址，尺寸自适-->
        <van-image :src="minio(video['coverImage'])" fit="fit" height="100%"/>
      </template>
      <template #tags>
        <!--视频封评分: 双绑视频评分，尺寸-->
        <van-rate v-model="video['star']" size="12px"/>
      </template>
    </van-card>
  </section>
  <van-divider dashed/>
  <!--脚: 分页按钮-->
  <footer class="video-list-foot">
    <!--分页: 双绑当前第几页，左箭头，右箭头，使用省略号，总条目数，每页多少条，改变时触发-->
    <van-pagination v-model="videoPageInfo['pageNum']" prev-text="<<" next-text=">>" force-ellipses
                    :total-items="videoPageInfo['total']" :items-per-page="videoPageInfo['pageSize']"
                    @change="changePage"/>
  </footer>

</template>

<script setup>
import {computed, onMounted, shallowReactive, shallowRef} from "vue";
import {SEARCH_BY_VIDEO_TITLE} from '@/api/video'
import {MINIO_HOST, SUCCESS} from "@/constant";
import {showFailToast} from "vant";
import router from "@/router";

/* ==================== data ==================== */

// data: 视频数据列表
let videos = shallowRef();
// data: 视频分页数据
let videoPageInfo = shallowReactive({'total': 0, 'pageNum': 1, 'pageSize': 4});
// data: 搜索时用户输入的视频标题
let videoTitle = shallowRef('');

/* ==================== computed ==================== */

// computed: 计算MinIO的代理地址，计算属性接收参数需要闭包
let minio = computed(() => src => MINIO_HOST + '/cover/' + src);

/* ==================== method ==================== */

// method: 异步搜索视频列表
async function searchByVideoTitle(pageNum, pageSize, videoTitle){

  // 视频标题搜索框为空时，赋值 `JB`，主要用于规避分页BUG
  videoTitle = '' === videoTitle.trim() ? 'JB' : videoTitle.trim();

  // 调用接口: 按视频标题搜索视频
  const result = await SEARCH_BY_VIDEO_TITLE(pageNum, pageSize, videoTitle);
  let resp = result['data'];

  if (resp.code === SUCCESS) {
    let data = resp.data;
    videos.value = data['list'];
    videoPageInfo['pageNum'] = data['pageNum'];
    videoPageInfo['pageSize'] = data['pageSize'];
    videoPageInfo['total'] = data['total'];
  } else {
    showFailToast(resp.message + ': ' + resp.data);
    searchFirstPageVideos();
  }
}

// method: 使用 `JB` 作为标题搜索第一页视频数据
let searchFirstPageVideos = () => {
  // 重置视频标题搜索框
  videoTitle.value = '';
  searchByVideoTitle(1, videoPageInfo['pageSize'], 'JB');
};

// method: 当翻页时触发
let changePage = pageNum => {
  videoPageInfo['pageNum'] = pageNum;
  searchByVideoTitle(pageNum, videoPageInfo['pageSize'], videoTitle.value);
};

// method: 点击 [视频详情] 按钮时，跳转到VideoDetail组件并传递视频ID值
let toVideoDetail = (videoId) => {
  router.push({path: '/VideoDetail', query: {'videoId': videoId}});
}

/* ==================== mounted ==================== */

// mounted: DOM挂载后，使用 `JB` 作为标题搜索第一页视频数据
onMounted(() => searchFirstPageVideos());

</script>

<style scoped lang="scss">

.video-list-body {

  text-align: left; // 内容居左

  /*卡片*/
  .van-card {
    color: orange; // 前景色
  }

  /*卡片中的图片*/
  .van-image {
    width: 130px; // 图片宽度
  }

  /**卡片中的文字内容: `:deep()` 用于深度修改框架组件的样式*/
  :deep(.van-card__content) {
    text-align: right; // 内容居右
  }
  .video-list-foot {
    padding: 0 20px; // 上下内边距 左右内边距
  }

}
</style>